// 渲染页面
var input_name = document.querySelector(".input_name");
var input_tel = document.querySelector(".input_tel");
var input_add = document.querySelector(".input_add");

var order_name = document.querySelector(".order_name");
var order_tel = document.querySelector(".order_tel");
var order_add = document.querySelector(".order_add");
var pay = document.querySelectorAll(".pay"); // 支付方式3个小盒子 用 All
var pays = document.querySelector(".pays");
var order_pay = document.querySelector(".order_pay");
var closing = document.querySelector(".closing");
var priceTotal = document.getElementById("priceTotal");
//判断用户
// 登陆了就获取购物车信息，退出就返回列表页
var tips = document.querySelector(".user-header");
var user = getCookie("lgc");
//   页面加载时 有用户名就表示用户身份  没有就去登录
if (user) {
  tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`;
}
submitOrders();
console.log(input_name,'input_name');
input_name.oninput = function () {
  order_name.innerHTML = input_name.value;
};
input_tel.oninput = function () {
  order_tel.innerHTML = input_tel.value;
};
input_add.oninput = function () {
  order_add.innerHTML = input_add.value;
};

pays.addEventListener(
  "click",
  (e) => {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.className == 'pay') { // 点击的小盒子变色 点击 pays 的时候 不触发 不然 最大的盒子也变色了
      pay.forEach(item => {
        item.style.color = '#000';
        item.style.border = '1px solid #000';
      })
      target.style.color = "pink";
      target.style.border = '1px solid pink';
      order_pay.innerText = target.innerText;
    }
  },
  false
);

// 支付点击事件
// 记得是值相比较  你写的 order_pay == ""  这是: 元素 == ''
closing.onclick = function () {
  if (
    order_pay.innerHTML == "" ||
    order_tel.innerHTML == "" ||
    order_add.innerHTML == "" ||
    order_name.innerHTML == ""
  ) {
    alert("请填写收获地址");
  } else {
    alert("订单已支付，请耐性等待发货");
  }
};

async function submitOrders() {
  if (user) {
    var orderId = window.location.search.split("?")[1].split("=")[1];
    console.log(orderId);

    var result = await searchSubmitList({ orderId });
    console.log(result);
    var { status, msg, data } = result;
    if (status) {
      var res = JSON.parse(data.orderList);
      console.log(res, "res");
      let html = "";
      let totalPrice = 0;
      res.forEach((item) => {
        html += `
          <tr>
            <td class="goods"><span>${item.title}</td>
            <td class="price">${item.priceNum}</td>
            <td class="count">${item.buyNum}</td>
            <td class="subtotal">${item.priceNum * item.buyNum}</td>
          </tr>
          `;
          totalPrice += (item.priceNum*item.buyNum); // 计算订单总金额
      });
      console.log(html);
      var tbody = document.querySelector("tbody");
      var totalPriceTxt = document.querySelector('#priceTotal'); // 获取总金额元素span
      tbody.innerHTML = html;
      totalPriceTxt.innerHTML = totalPrice;      
    } else {
      location.href = "../html/shopping.html";
    }
  } else {
    location.href = "../html/shopping.html";
  }
}

//填写收货人信息
//选择支付方式
//获取订单信息
//获取收货人信息
function exit() {
  deleteCookie("lgc");
  location.assign("../html/index.html");
}
